<template>
  <div class="movie">
    <div class="head">猫眼电影</div>
    <Nav></Nav>
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh">
    </van-pull-refresh>

    <div class="zhuye">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in  haopin.movieList" :key="index">
          <van-image :src="item.poster" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="p">
    <p>最受好评电影</p>
    </div>
  </div>
</template>

<script>
import Nav from "../components/NavView";
import { Toast } from "vant";

export default {
  data() {
    return {
      count: 0,
      isLoading: false,
      haopin: {},
    };
  },

  components: {
    Nav,
  },
  created() {
    this.getlis();
  },
  methods: {
    getlis() {
      this.axios.get("index/topRatedMovies").then((re) => {
        console.log("re===>", re);
        this.haopin = re;
      });
    },

    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
  },
};
</script >

<style scoped>
.head {
  width: 100%;
  height: 60px;
  background-color: brown;
  color: aliceblue;
  font-size: 30px;
  text-align: center;
}
.my-swipe{
  width: 100%;
  height: 530px;
  background-color: black;
}
.zhuye van-image{
  width: 100%;
  height: 100%;
}
.movie .p{
  width: 100%;
  text-align: center;
  font-size: 20px;
  color: dimgray;
}
</style>